<template>
    <NuxtLayout name="default">
        <div v-if="config.status" class="flex flex-1 gap-4 overflow-hidden">
            <div class="flex flex-col shrink-0 w-[360px] bg-body rounded-lg border border-br-lighter">
                <div class="m-3">
                    <editor-mode v-model="formData.mode" />
                </div>
                <el-scrollbar>
                    <div class="p-4 flex flex-col gap-4 relative">

                        <!-- 文本描述 -->
                        <editor-name
                            v-model="formData.title"
                        />

                        <!-- 文本描述 -->
                        <editor-prompt
                            v-model="formData.prompt"
                        />

                        <!-- 生成风格 -->
                        <editor-version
                            v-model="formData.mv"
                        />

                        <!-- 生成风格 -->
                        <editor-style
                            v-if="styles.length > 0"
                            v-model="formData.styles"
                            :styleList="styles"
                        />
                    </div>
                </el-scrollbar>

                <div class="m-3 mt-0">
                    <create-button />
                </div>
            </div>

            <RevealResult v-if="userStore.isLogin" />
            <div
                v-else
                class="flex items-center justify-center w-full h-full"
            >
                <el-empty class="!py-0" description="请登录后再查看" />
            </div>
        </div>

        <div v-else class="h-full flex-1 flex p-4 justify-center items-center">
            <el-result>
                <template #icon>
                    <el-image
                        class="w-[200px] dark:opacity-60"
                        :src="emptyBoxImg"
                    />
                </template>
                <template #title>
                    <div class="text-info">功能暂未开启</div>
                </template>
            </el-result>
        </div>
    </NuxtLayout>
</template>

<script setup lang="ts">
import emptyBoxImg from '~/assets/image/empty_box.png'
import CreateButton from './_components/create-button.vue'
import EditorMode from './_components/editor-mode.vue'
import EditorName from './_components/editor-name.vue'
import EditorStyle from './_components/editor-style.vue'
import EditorPrompt from './_components/editor-prompt.vue'
import EditorVersion from './_components/editor-version.vue'
import RevealResult from './_reveal/index.vue'
import musicApi from '~/api/apply/music/index'
import useUserStore from '~/stores/user'
import { config, formData, getMusicConfig, resetFormData } from './hooks/useMusicEffect'

const userStore = useUserStore()

const styles = ref<MusicStylesResponse[]>([])
onMounted(async () => {
    await resetFormData({
        // 音乐通道
        engine: 'suno',
        // 音乐类型
        mode: 'muse',
        // 音乐标题
        title: '',
        // 音乐描述
        prompt: '',
        // 风格ID
        styles: [],
        // 风格词汇
        tags: '',
        // 音乐版本
        mv: 'chirp-v3-0',
        // 纯音乐
        make_instrumental: false

    })
    await getMusicConfig()
    styles.value = await musicApi.styles()
})
</script>
